<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品分类</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left fs_xxi"></a>
			<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" id="ch_ri"></a>
			<h1 class="mui-title fs_xl">商品分类</h1>
		</header>
		<include file="public/bottom_nav" />
		<div class="ch_nav cls" id="ch_nav">
			<div class="ch_box">
				<div class="ch_box_m">
				<div class="ch_list">
					<div class="ch_tit fs_l">香型<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="aroma">
							<foreach name="aroma" item="vo" key="k">
								<li data-val="{$vo.id}">
									<a class=""><em class="fs_xs">{$vo.title}</em></a>
								</li>
							</foreach>
						</ul>
					</div>
				</div>
				<div class="ch_list">
					<div class="ch_tit fs_l">酒精度<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="degree">
							<foreach name="degree" item="vo" key="k">
								<li data-val="{$vo.degree}">
									<a class=""><em class="fs_xs">{$vo.degree}°</em></a>
								</li>
							</foreach>
						</ul>
					</div>
				</div>
				<div class="ch_list">
					<div class="ch_tit fs_l">年份<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="years">
							<foreach name="years" item="vo" key="k">
								<li data-val="{$vo.years}">
									<a class=""><em class="fs_xs">{$vo.years}年</em></a>
								</li>
							</foreach>
						</ul>
					</div>
				</div>
				<div class="ch_list">
					<div class="ch_tit fs_l">原产地<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="origin">
							<foreach name="origin" item="vo" key="k">
								<li data-val="{$vo.id}">
									<a class=""><em class="fs_xs">{$vo.title}</em></a>
								</li>
							</foreach>
						</ul>
					</div>
				</div>
				<div class="ch_list">
					<div class="ch_tit fs_l">主题定制<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
					<div class="ch_item cls">
						<ul class="cls" id="theme">
							<foreach name="theme" item="vo" key="k">
								<li data-val="{$vo.id}">
									<a class=""><em class="fs_xs">{$vo.title}</em></a>
								</li>
							</foreach>
						</ul>
					</div>
				</div>
				</div>
				<div class="ch_btn">
					<a class="ch_res">取消</a>
					<a class="ch_sub">完成</a>
				</div>
			</div>
			<div class="left_kb" style="width:25%;float: left;height: 100%;background: transparent;"></div>
		</div>
		<div class="mui-content fs_xl">
			<!--<div class="dz_gd1">
				<a href="javascript:;">排行<i class="mui-icon mui-icon-arrowdown fs_m"></i></a>
				<ul class="dz_ul fs_xl">
					<li>销量</li>
					<li>价格</li>
				</ul>
			</div>-->
			<div id="pullrefresh" class="mui-scroll-wrapper anli fs_xl" style="">
				<div class="mui-scroll fs_xl al_list">
					<div class="mui-table-view mui-table-view-chevron" style="background: transparent;">
						<ul id="goodslist" class="cls">
					    <foreach name="searchgoods" item="vo" key="k">
							<li class="mui-table-view-cell" style="margin-top: 0.2em; padding: 0.2em;" >
								<a href="{:U('Destine/goodsInfo',array('id'=>$vo.goods_id))}"><img class="goodsimage" src="{$vo.goods_id|goods_thum_images=400,400}" width=""></a>
								<p><a class="fs_xs" href="{:U('Destine/goodsInfo',array('id'=>$vo.goods_id))}">我要定制</a><em class="fs_m">{$vo.goods_name}</em></p>
								<p class="cls"><span class="fs_xl">¥{$vo.shop_price}</span><span class="fs_xs">{$vo.sales_sum}单已售</span></p>
							</li>
					    </foreach>	
					   </ul>
					</div>
				</div>
			</div>
		</div>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
//					down: {
//						callback: pulldownRefresh
//					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			//			function pulldownRefresh() {
			//				setTimeout(function() {
			//					var table = document.body.querySelector('.mui-table-view');
			//					var cells = document.body.querySelectorAll('.mui-table-view-cell');
			//					for (var i = cells.length, len = i + 3; i < len; i++) {
			//						li.className = 'mui-table-view-cell';
			//						li.innerHTML = '<a class="fs_xl" href="javascript:;">'+'<div class="pr_info fs_xl fr">'+
			//						'<p class="fs_m">新增加的酒'+'</p>'+
			//						'<p class="fs_xs">'+'<i class="mui-icon mui-icon-eye">'+'</i>'+'<em>'+'</em>成都市大邑县原产'+'</p>'+
			//						'<p class="fs_m">'+'<span class="span1 fs_xxs">室内窖藏'+'</span>'+'<span class="span2 fs_xxs">馥郁香'+'</span>'+'</p>'+
			//						'<p class="fs_m">'+'<span class="span3 fs_xl">¥56/kg'+'</span>'+'<span class="span4 fs_xxs">6583kg已售'+'</span>'+'</p>'+
			//						'</div>'+
			//						'<div class="pr_img fs_xl fl">'+'<img src="../images/banner03.png" />'+'</div>'+
			//						'</a>';
			//						//下拉刷新，新纪录插到最前面；
			//						table.insertBefore(li, table.firstChild);
			//					}
			//					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
			//				}, 1500);
			//			}
			var count = 0;
			var pagenum = {$pagenum};
			var limit = 10; //设置请求条数
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count >= pagenum)); //参数为true代表没有更多数据了。
					getdatas('pullRefresh', limit * count);
				}, 1500);
			}
			//			if (mui.os.plus) {
			//				mui.plusReady(function() {
			//					setTimeout(function() {
			//						mui('#pullrefresh').pullRefresh().pullupLoading();
			//					}, 10);
			//
			//				});
			//			} else {
			//				mui.ready(function() {
			//					mui('#pullrefresh').pullRefresh().pullupLoading();
			//				});
			//			}
		</script>
		<script>
			$(function() {
				var winW = $("body").width();
				var liW = (winW - 1) / 2;
				var alW = (winW - 5) / 2;
//				var winH=$(window).height();
//				$(".ch_box_m").height(winH-20);
				$(".dz_gd1 a").toggle(function() {
					$(this).find("i").removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowup");
					$(".dz_ul").show();
				}, function() {
					$(".dz_ul").hide();
					$(this).find("i").removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown");
				})
				$(".ch_sub,.ch_res,.left_kb").click(function() {		
					$(".ch_box,.ch_btn").animate({
						width:'0'
					});
					$("#ch_nav").hide();
				});
				$(".ch_res").click(function(){
					$(".ch_list li").removeClass("ch_right");
					$(".ch_list li").find("i").remove();
					getdatas('search',0);
				})
				$("#ch_ri").click(function() {
					$("#ch_nav").show(1);
					$(".ch_box,.ch_btn").animate({
						width:'75%'
					},300);
				})
				$(".ch_tit i").click(function(){
					if($(this).hasClass("mui-icon-arrowdown")){
						$(this).removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowup");
						$(this).parent().siblings(".ch_item").css("height","auto"); 
					}else{
						$(this).removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown");
						$(this).parent().siblings(".ch_item").css("height","3em");
					}
					$(this).parents(".ch_list").siblings().find(".ch_tit i").removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown");
					$(this).parents(".ch_list").siblings().find(".ch_item").css("height","3em");
				});
				$(".ch_item li").click(function() {
					if($(this).find("i").length <= 0) {
						$(this).addClass("ch_right").siblings().removeClass("ch_right");
						$(this).find("a").prepend('<i class="mui-icon mui-icon-checkmarkempty fs_xi"></i>');
						$(this).siblings().find("i").remove();
						getdatas('search', 0);
					}else{
						$(this).removeClass("ch_right");
						$(this).find("i").remove();
						getdatas('search', 0);
					}
				});
				$("#goodslist").on('tap',"li",function() {
  					var sur=$(this).find("a").attr("href");
  					mui.openWindow({
    					url: sur
  					});
				});
			});
		</script>
		<script>
			mui.init();

			//Ajax请求数据,mod为pullRefresh则是上拉加载数据，不需要重置数据，其他情况则必须重置数据
			function getdatas(mod, start) {
				var aroma_id = $('#aroma li.ch_right').attr("data-val");
				var degree = $('#degree li.ch_right').attr("data-val");
				var years = $('#years li.ch_right').attr("data-val");
				var theme_id = $('#theme li.ch_right').attr("data-val");
				var origin_id = $('#origin li.ch_right').attr("data-val");
                console.log(years);
				$.post("{:U('Destine/categoryList')}", {
					'start': start,
					'limit': limit,
					'aroma_id': aroma_id,
					'degree': degree,
					'years': years,
					'theme_id': theme_id,
					'origin_id': origin_id,
				}, function(content) {
					if(content.status == 1) {
						if(mod != 'pullRefresh') {
							$("#goodslist").html(" "); //重置数据
						}
						pagenum = content.data.pagenum;
						$.each(content.data.searchgoods, function(i, goods) {
                            var li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '<a href="{:U('Destine/goodsInfo',array('id'=>$vo.goods_id))}">' + '<img src="'+goods.original_img+'" />' + '</a>' +
								'<p>' + '<a class="fs_xs" href="javascript:;">我要定制' + '</a>' + '<em class="fs_m">'+goods.goods_name+ '</em>' + '</p>' +
								'<p class="cls">' + '<span class="fs_xl">¥'+goods.shop_price+ '</span>' + '<span class="fs_xs">6575已售' + '</span>' + '</p>';
							$("#goodslist").append(li);
						});
						$(".mui-pull").show();
					} else {
						if(mod != 'pullRefresh') {
							$("#goodslist").html("<center>暂无相关商品</center>");
							$(".mui-pull").hide();
						}
					}
				}, 'json');

			}
		</script>
	</body>

</html>